// 本文件用于：加载图标

import { RootState } from '@/store';
import { memo } from 'react';
import { useSelector } from 'react-redux';
import styles from './index.module.less';

interface IProps {
  /** 图标大小（传入数字时单位：px） */
  size?: number | string;
  className?: string;
}

export default memo((props: IProps) => {
  /** 主题色 */
  const { primaryColor, themeType } = useSelector((state: RootState) => state.global.styleCfg);

  const { size = 16, className } = props;

  const iconSize = typeof size === 'number' ? `${size}px` : size;

  return (
    <div className={`${styles.loadingBox} ${className || ''}`}>
      <div
        className={styles.loading}
        style={{
          width: iconSize,
          height: iconSize,
          color: primaryColor,
        }}
      >
        <div></div>
        <div
          style={{
            backgroundColor: themeType === 'dark' ? '#888888' : '#d7d7d7',
          }}
        ></div>
      </div>
    </div>
  );
});
